<template lang="html">
    <div class="box" v-loading="loading">

          <div class="body">
            <div class="summary_left">
                <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                    <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                      <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="onchange" style="width: 100%;"
                        value-format="yyyy-MM-dd HH:mm:ss" >
                      </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>

                <div id="echart_canvas" style="width: 100%;height:600px;margin:0 auto;clear:both"></div>
                <div id="echart_canvas2" style="width: 100%;height:600px;margin:0 auto;clear:both"></div>
          </div>


                          <p class="summary">{{tableData.total}}</p>

    </div>
</template>

<script>
export default {
  data () {
    return {
      token: this.$store.state.user.token3,
      tableData: [],
      intervalTime: [],
      loading: false
    }
  },
  created () {
    this.switchTab()
  },
  methods: {
    initSetData () {
      this.tableData = []
      this.intervalTime = []
    },
    onchange () {
      this.switchTab()
    },
    switchTab () {
      this.loading = true
      var jsonData = {
        token: this.token,
        start_time: (this.intervalTime && this.intervalTime[0]) || '',
        end_time: (this.intervalTime && this.intervalTime[1]) || '',
      }
      var resultAll = Promise.all([this.$http3.gatherExpend(jsonData), this.$http3.gatherIncome(jsonData)])
      resultAll.then(this.resultFn())
    },
    resultFn () {
      return function (res) {
        if (res[0].data.code == 1 || res[1].data.code == 1) {

          this.tableData = res[0].data.data;
          this.girdData = res[1].data.data;
          this.renderEcharts(this.tableData, this.girdData)
          this.loading = false
        }
      }.bind(this)
    },
    renderEcharts (data, girdData) {

      var option2 = {

        title: {
          text: '数据统计',
          x: 'center'
        },
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '4%',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true,
              }
            }
          }
        },
        legend: {
          x: 'right',
          data: [{ name: girdData.income.userBbyOnce + '车主一次卡' }, { name: girdData.income.userBbyQuartic + '车主四次套餐' }, { name: girdData.income.userUCharge + '车主U惠多充值' }]
        },
        xAxis: [
          {
            type: 'category',
            'axisLabel': { 'interval': 0 },
            'data': [
              { value: '车主停驶奖励', textStyle: { fontStyle: "italic" } },
              { value: '车主分享', textStyle: { fontStyle: "italic" } },
              { value: '车主推荐', textStyle: { fontStyle: "italic" } },
              { value: '油站交易', textStyle: { fontStyle: "italic" } },
              { value: '技师服务费', textStyle: { fontStyle: "italic" } },
              { value: '维修厂售卡奖励', textStyle: { fontStyle: "italic" } },
              { value: '维修厂推荐奖励', textStyle: { fontStyle: "italic" } },
              { value: '维修厂工时费', textStyle: { fontStyle: "italic" } },
              { value: '维修厂滤芯补助', textStyle: { fontStyle: "italic" } },
              { value: '运营商售卡收入', textStyle: { fontStyle: "italic" } },
              { value: '运营商推荐奖励', textStyle: { fontStyle: "italic" } },
              { value: '供应商邦保盒子', textStyle: { fontStyle: "italic" } },
              { value: '供应商油品结算', textStyle: { fontStyle: "italic" } },
              { value: '供应商养护品结算', textStyle: { fontStyle: "italic" } }
            ],
            splitLine: { show: false }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '（元）'
          }
        ],
        series: [
          {
            name: '总支出',
            type: 'bar',
            barWidth: '50%',
            data: [
              data.expend.userLayOff,
              data.expend.userShare,
              data.expend.userRecom,
              data.expend.oilService,
              data.expend.workerService,
              data.expend.shopCardInc,
              data.expend.shopRecom,
              data.expend.shopHourFee,
              data.expend.shopFilter,
              data.expend.agentCardInc,
              data.expend.agentRecom,
              data.expend.smObdInc,
              data.expend.smOilInc,
              data.expend.smFreeInc,
            ]
          },
          {
            name: '总收入',
            type: 'pie',
            radius: '38%',
            center: ['50%', '50%'],

            data: [
              { value: girdData.income.userBbyOnce, name: girdData.income.userBbyOnce + '车主一次卡' },
              { value: girdData.income.userBbyQuartic, name: girdData.income.userBbyQuartic + '车主四次套餐' },
              { value: girdData.income.userUCharge, name: girdData.income.userUCharge + '车主U惠多充值' }
            ]
          },
        ]

      }
      var myChart = this.$echarts.init(document.getElementById('echart_canvas'));
      myChart.setOption(option2);

      var myChart2 = this.$echarts.init(document.getElementById('echart_canvas2'));
      myChart2.setOption(option3);


    },

  }
}
</script>

<style lang="css" scoped>
@import "../../../my-style/app.css";
.summary {
  float: right;
  font-size: 16px;
  margin: 10px 0;
}
.summary_left {
  float: left;
  z-index: 9;
  position: relative;
}
</style>
